<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层级选择器</title>
	<script src="../jquery/jquery-3.3.1.js"></script>
</head>
<body>
	<div class="testing">
		<ul class="test-lang">
			<li class="lang-javascript">JavaScript</li>
			<li class="lang-python">Python</li>
			<li class="lang-lua">Lua</li>
			<li class="lang-php">PHP</li>
		</ul>
		<ol class="test-lang">
			<li class="lang-swift">Swift</li>
			<li class="lang-java">Java</li>
			<li class="lang-c">C</li>
		</ol>
	</div>
<script>
	//1:层级选择器 $('ancestor descendant')
	//选出JavaScript
	let javaScript = $("div.testing li.lang-javascript");
	console.log(javaScript.text());
	let javaScript1 = $("ul.lang li.lang-javascript");
	console.log(javaScript1.text());
	//$('form.test p input'); // 在form表单选择被<p>包含的<input>

	//2:子选择器,类似层级选择器，但限定了层级关系必须是父子关系child 必须是 parent的直属节点
	//选出javaScript
	//可以选出来
	let javaScript3 = $("ul.lang>li.lang-javascript");
	console.log(javaScript3.text());

	//不能选出来
	let javaScript4 = $("div.testing>li.lang-javascript");
	console.log(javaScript4.text());

	//3:过滤器，通常附加在子选择器上帮助我们更加精确的定位元素
	//3.1:选出 javaScript,Python,Lua三个节点
	console.log("选出 javaScript,Python,Lua三个节点:" + $("div.testing li").text());

	//3.2:选出JavaScript
	console.log("选出JavaScript:" + $("div.testing li:first-child").text());

	//3.3:选出Lua
	console.log("选出Lua:" + $("div.testing li:last-child").text());

	//3.4:选出第N个元素
	console.log("选出第N个元素:" + $("div.testing li:nth-child(2)").text());

	//3.5:选出偶数的元素，下标从1开始
	console.log("选出偶数的元素，下标从1开始:" + $("div.testing li:nth-child(even)").text());

	//3.6:选出奇数的元素，下标从1开始
	console.log("选出奇数的元素，下标从1开始:" + $("div.testing li:nth-child(odd)").text());

	//4:表单相关
	/**
	 * :input : 可以选择 <input>,<textarea>,<select>,<button>
	 * :file : 可以选择 <input type="file"> 相当于 input[type=file]
	 * :checkbox : 相当于 input[type=checkbox]
	 * :radio : 相当于 input[type=radio]
	 * :focus : 可以选择当前输入焦点的元素，例如将光标放在input上 input:focus 可以选出
	 * :checked : 选择用户勾上的单选框，复选框 用它可以立即捕获 $("input[type=radio]:checked"
	 * :enabled : 可以选择可以正常输入的<input> <select> 也就是没有灰掉的输入
	 * :disable : 选择那些不能输入的
	 * $("div:visible") : 选择可见的div
	 * $("div:hidden") : 选择不可见的div
	 */
	//习题
	//分别选择所有语言，所有动态语言，所有静态语言，JavaScript，Lua，C等:
	//静态语言
	console.log("静态语言:" + $("div.testing>ol li").text());
	//动态语言
	console.log("动态语言:" + $("div.testing>ul li").text());
</script>
</body>
</html>